<template>
  <div class="auth-layout">
    <div class="auth-container">
      <div class="auth-header">
        <img src="/favicon.ico" alt="Logo" class="logo" />
        <h1 class="title">eSIM Store 管理系统</h1>
      </div>
      
      <div class="auth-content">
        <router-view />
      </div>
      
      <div class="auth-footer">
        <p>&copy; 2024 eSIM Store. All rights reserved.</p>
      </div>
    </div>
    
    <div class="auth-background">
      <div class="bg-shape shape-1"></div>
      <div class="bg-shape shape-2"></div>
      <div class="bg-shape shape-3"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 认证布局组件
</script>

<style lang="scss" scoped>
.auth-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  
  .auth-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    min-width: 400px;
    max-width: 500px;
    width: 100%;
    margin: 20px;
    position: relative;
    z-index: 2;
    
    .auth-header {
      text-align: center;
      margin-bottom: 30px;
      
      .logo {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
      }
      
      .title {
        color: #2c3e50;
        font-size: 24px;
        font-weight: 600;
        margin: 0;
      }
    }
    
    .auth-content {
      margin-bottom: 30px;
    }
    
    .auth-footer {
      text-align: center;
      
      p {
        color: #7f8c8d;
        font-size: 14px;
        margin: 0;
      }
    }
  }
  
  .auth-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    
    .bg-shape {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: float 6s ease-in-out infinite;
      
      &.shape-1 {
        width: 200px;
        height: 200px;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
      }
      
      &.shape-2 {
        width: 150px;
        height: 150px;
        top: 60%;
        right: 10%;
        animation-delay: 2s;
      }
      
      &.shape-3 {
        width: 100px;
        height: 100px;
        bottom: 20%;
        left: 20%;
        animation-delay: 4s;
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@media (max-width: 768px) {
  .auth-layout {
    .auth-container {
      margin: 10px;
      padding: 30px 20px;
      min-width: auto;
    }
  }
}
</style>
